/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View
} from 'react-native';



let  dataS = require('./TestBageDemo.json');

let  dimensions = require('Dimensions');

let {width, height} = dimensions.get('window');

let cols = 3;
let boxW = 100;
let vMargin = (width - cols * boxW) / (cols + 1);
let hMargin = vMargin;


class BlinkApp extends Component {

    render() {
        return (
            <View style={styles.container}>
                {this.bageArray()}
            </View>
        );
    }

    bageArray(){
        let  tempArray =[];

        for (let  i = 0 ; i < dataS.data.length; i++){
            let item = dataS.data[i];

            tempArray.push(

                <View key={i} style={styles.itemSheet}>
                    {/*<Image source={{uri:item.icon}} style={{width: boxW,height: boxW - 21}}/>*/}
                    <Text >{item.title}</Text>
                </View>


            );



        }
        return tempArray;
    }

}


const styles = StyleSheet.create({
    container: {
        // backgroundColor:'skyblue',
        marginTop:100,
        flexDirection:'row',
        flexWrap:'wrap',


    },
    itemSheet:{
        width:boxW,
        height:boxW,
        alignItems:'center',
        marginLeft:hMargin,
        marginTop:vMargin,
        backgroundColor:'gray',
    }
});

module.exports = BlinkApp;

